<template>
  <div id="app">
    <el-tabs type="border-card" v-model="editableTabsValue"  @tab-remove="removeTab">

      <el-tab-pane label="用户管理" name="1">
        <el-button @click="seeuser(1, '')">全部用户</el-button>
        <el-button type="success" @click="seeuser(1, 0)">正常用户</el-button>
        <el-button type="danger" @click="seeuser(1, 1)">封号用户</el-button>
        <el-table
          :data="userdata"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="state"
            label="账号状态"
            width="80">
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="注册时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="real_name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="电话号码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="170">
          </el-table-column>
          <el-table-column
            prop="useraddress"
            label="地址"
            width="150">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="handleClickupdat(scope.row.id)" type="text" size="small" v-if="scope.row.disable">解封</el-button>
              <el-button @click="handleClickupdat(scope.row.id)" type="text" size="small" v-else="scope.row.disable">封号</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total=pages
          :page-size=pager
          :current-page=page
          class="el-pagination">
        </el-pagination>
      </el-tab-pane>
      
      <el-tab-pane label="添加用户" name="2">

        <el-form ref="form" :model="form" label-width="8rem" class="el-form" :rules="rules">
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>

          <el-form-item label="真实姓名" prop="real_name">
            <el-input v-model="form.real_name"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
              <el-radio label="保密"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="电话号码" prop="mobile">
            <el-input v-model.number="form.mobile"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>

          <el-form-item label="生日" prop="birthday">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="地址">
            <el-input type="textarea" v-model="form.useraddress"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      
      <el-tab-pane
        :key="item.name"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
        :closable=true
      >
        <el-form ref="form" :model="form" label-width="8rem" class="el-form">
          <div style="display: flex;justify-content: center;padding-right:10rem;"> 
            <el-image
              style="width: 10rem; height: 10rem"
              :src='`${publicPath}${item.content.userimg}`'
            ></el-image>
          </div>
          <div class="relation-item">账号状态:  <div style="float: right; padding-right:10rem;">{{item.content.state}}</div></div>
          <div class="relation-item">账号:  <div style="float: right; padding-right:10rem;">{{item.content.username}}</div></div>
          <div class="relation-item">真实姓名:  <div style="float: right; padding-right:10rem;">{{item.content.real_name}}</div></div>
          <div class="relation-item">性别:  <div style="float: right; padding-right:10rem;">{{item.content.gender}}</div></div>
          <div class="relation-item">手机号码:  <div style="float: right; padding-right:10rem;">{{item.content.mobile}}</div></div>
          <div class="relation-item">邮箱:  <div style="float: right; padding-right:10rem;">{{item.content.email}}</div></div>
          <div class="relation-item">生日:  <div style="float: right; padding-right:10rem;">{{item.content.birthday}}</div></div>
          <div class="relation-item">注册时间:  <div style="float: right; padding-right:10rem;">{{item.content.createdAt}}</div></div>
          <div class="relation-item">地址:  <div style="float: right; padding-right:10rem;">{{item.content.useraddress}}</div></div>

        </el-form>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-pagination {
    text-align:center
  }

  .cell {
    text-align:center
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .el-form {
    margin-left: calc(30%);
    width: 40%;
  }

  .relation-item {
    padding: 1.2rem;
  }
</style>

<script>
import axios from 'axios';

export default {

    data() {

      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        publicPath: process.env.BASE_URL,

        editableTabs: [],
        editableTabsValue: '1',
        tabIndex: 2,

        form: {
          username: '',
          password: '',
          checkPass: '',
          birthday: '',
          mobile: '',
          email: '',
          disable: '',
          gender: '',
          useraddress: '',
          real_name: '',
        },

        userdata: [],
        pages: 50,
        page: 1,
        pager: 10,
        userdisable: true,

        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            {max: 10, message: '长度在 10 个字符以内', trigger: 'blur' }
          ],
          nickname: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' }
          ],
          real_name: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6 , message: '长度在 6 位以上', trigger: 'blur' }
          ],
          checkPass: [
            { required: true, message: '请输入再输入密码', trigger: 'blur' },
            { validator: checkPass, trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { pattern: /^0{0,1}(13[0-9]|15[7-9]|153|18[0-9]|199)[0-9]{8}$/, message: '手机号格式有误', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式有误', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请输入生日', trigger: 'blur' }
          ]
        },

        
      }
    },
    
    created() {
      this.seeuser();
    },

    methods: {

      

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.adduser(this.form);
          } else {
            this.$message.error('请输入正确格式');
            return false;
          }
        });
      },

      async adduser(data){
        let rs = await axios({
          method: 'post',
          url: '/api/admin/user/add',
          data: {
            data: this.form
          }
        });
        if(rs.data.code){
          this.$message.error(rs.data.message);
        }else{
          rs.data.data.state = '正常';
          if(this.userdisable != 1){
            this.userdata.push(rs.data.data);
            this.pages++;
          }
          this.$message({
            message: '添加用户成功',
            type: 'success'
          });
          this.activeName = 'first';
          this.form= {
            username: '',
            password: '',
            checkPass: '',
            birthday: '',
            mobile: '',
            email: '',
            disable: '',
            gender: '',
            useraddress: '',
            real_name: '',
          }
        }
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      handleCurrentChange(val) {
        this.seeuser(val);
      },

      tableRowClassName({row, rowIndex}) {
        if (rowIndex%4 == 1) {
          return 'warning-row';
        } else if (rowIndex%4 == 3) {
          return 'success-row';
        }
        return '';
      },

      handleClick(val) {
        let newTabName = ++this.tabIndex + '';
        console.log(val);
        this.editableTabs.push({
          title: '查看用户信息',
          name: newTabName,
          content: val
        });
        this.editableTabsValue = newTabName;
      },

      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = '1';
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },

      async handleClickupdat(id){
        console.log(id);
        let {data} = await axios( {
          method: 'post',
          url: '/api/admin/user/updat',
          data: {
            id
          }
        } );
        if(data.code){
          this.$message.error(rs.data.message);
        }else{
          this.seeuser(this.page, this.userdisable);
        }

      },

      async seeuser(page, userdisable) {
        this.userdisable = userdisable;
        this.page = page;
        let {data} = await axios( {
          method: 'get',
          url: '/api/admin/user',
          params: {
            page,
            userdisable,
          }
        } );
        this.userdata = data.data;
        this.pages = data.prepage;
        this.userdata.forEach( item => {
          if(item.disable){
            item.state = '不可使用';
          }
          else{
            item.state = '正常';
          }
        } );
        
      }

    }

}
</script>